BootStrap
Marcos Alvarães
Bootstrap 3
Professor / Formador Marcos Alvarães 2
O que é Bootstrap?
Professor / Formador Marcos Alvarães 3
O que é Web
Design
Responsivo?
Professor / Formador Marcos Alvarães 4
Exemplo de Bootstrap.1
Professor / Formador Marcos Alvarães 5
Histórico de bootstrap
Professor / Formador Marcos Alvarães 6
Porque usar o Bootstrap?
Professor / Formador Marcos Alvarães 7
Onde obter o bootstrap?
www.getbootstrap.com
Professor / Formador Marcos Alvarães 8
CDN bootstrap
Se não quiser fazer o download e
hospedar o Bootstrap, pode incluí-lo de
um CDN (Content Delivery Network).
MaxCDN fornece o suporte CDN para
CSS e JavaScript do Bootstrap. Deve-
se também incluir o jQuery.
Professor / Formador Marcos Alvarães 9
Professor / Formador Marcos Alvarães 10
Para Criar uma
página com
bootstrap
1. Adicione o doctype HTML5
O Bootstrap utiliza elementos HTML e
propriedades CSS que exigem o
doctype HTML5.
Inclua sempre o doctype HTML5 no
início da página, junto com o atributo
lang e o conjunto de caracteres
correto.
Professor / Formador Marcos Alvarães 11
Bootstrap 3
prioriza os
dispositivos
móveis
O Bootstrap 3 foi projetado para ser responsivo com dispositivos
móveis. Os estilos que priorizam o smartphone fazem parte da estrutura
principal.
Para garantir a renderização e zoom de toque adequados, adicione a
seguinte <meta> tag dentro do elemento <head>.
A parte width=device-width define a largura da página para seguir a
largura da tela do dispositivo (que irá variar dependendo do dispositivo).
A parte initial-scale=1 define o nível de zoom inicial quando a página é
carregada pela primeira vez pelo navegador.
Professor / Formador Marcos Alvarães 12
Recipientes
O bootstrap também requer um
elemento de contenção para
envolver o conteúdo do site.
Existem duas classes de contêiner
para escolher.
A classe .container fornece
um contêiner de largura
fixa responsivo.
A classe .container-fluid fornece
um contêiner de largura total ,
abrangendo toda a largura da janela
de visualização
Professor / Formador Marcos Alvarães 13
O exemplo seguinte mostra o código para uma
página Bootstrap básica (com um contêiner de
largura fixa responsivo)
Professor / Formador Marcos Alvarães 14
Exemplo de Bootstrap.2
Professor / Formador Marcos Alvarães 15
O exemplo seguinte mostra o código para uma página
Bootstrap básica (com um contêiner de largura total)
Professor / Formador Marcos Alvarães 16
Exemplo de Bootstrap.3
Professor / Formador Marcos Alvarães 17
Bootstrap 3 vs. Bootstrap 4
Bootstrap 3.
Professor / Formador Marcos Alvarães 18
Bootstrap 3 vs.
Bootstrap 4
Classes de grid
Professor / Formador Marcos Alvarães 19
Bootstrap 4
Professor / Formador Marcos Alvarães 20
Bootstrap 4
Grids
Professor / Formador Marcos Alvarães 21
O sistema de grade do Bootstrap 4 permite até 12
colunas na página.
Professor / Formador Marcos Alvarães 22
Classes de grid
O sistema de grade Bootstrap 4 tem
cinco classes.
As classes podem ser combinadas para
criar layouts mais dinâmicos e flexíveis.
Dica: Cada classe aumenta, então se
desejar definir as mesmas larguras para
sm e md, você só precisa especificar sm.
Professor / Formador Marcos Alvarães 23
Estrutura Básica de uma Grid Bootstrap 4
Professor / Formador Marcos Alvarães 24
Colunas iguais
Professor / Formador Marcos Alvarães 25
Exemplo de Bootstrap.4
Professor / Formador Marcos Alvarães 26
Colunas Responsivas
O exemplo a seguir mostra
como criar quatro colunas
de largura igual começando
em tablets e escalando
para desktops
extragrandes. Em
telemóveis ou em telas
com menos de 576 px de
largura, as colunas
serão empilhadas
automaticamente umas
sobre as outras.
Professor / Formador Marcos Alvarães 27
Exemplo de Bootstrap.5
Professor / Formador Marcos Alvarães 28
Duas colunas responsivas desiguais
Professor / Formador Marcos Alvarães 29
Exemplo de Bootstrap.6
Professor / Formador Marcos Alvarães 30
Estrutura Básica de uma Grid Bootstrap 4
Exemplo de Bootstrap.7
Professor / Formador Marcos Alvarães 31
Opções de grid
Professor / Formador Marcos Alvarães 32
Exemplo de grid de bootstrap 4:
empilhado na horizontal
Professor / Formador Marcos Alvarães 33
Exemplo de Bootstrap.8
Professor / Formador Marcos Alvarães 34
Colunas de layout automático
Professor / Formador Marcos Alvarães 35
Exemplo de Bootstrap.9
Professor / Formador Marcos Alvarães 36
Exemplos
de Bootstrap 4 Grid
Professor / Formador Marcos Alvarães 37
Exemplos de Bootstrap 4 Grid
Professor / Formador Marcos Alvarães 38
Exemplo de Bootstrap.10
Professor / Formador Marcos Alvarães 39
Três colunas iguais
com números
Podemos utilizar números para
controlar a largura da coluna. Apenas
certifique-se de que a soma seja 12 ou
menos (não é necessário utilizar todas
as 12 colunas disponíveis):
Professor / Formador Marcos Alvarães 40
Exemplo de Bootstrap.11
Professor / Formador Marcos Alvarães 41
Três colunas
desiguais
Para criar colunas desiguais, devemos
utilizar números. O exemplo a seguir
criará uma divisão de 25% / 50% /
25%:
Professor / Formador Marcos Alvarães 42
Exemplo de Bootstrap.12
Professor / Formador Marcos Alvarães 43
Professor / Formador Marcos Alvarães 44
Exemplo de Bootstrap.13
Professor / Formador Marcos Alvarães 45
Professor / Formador Marcos Alvarães 46
Exemplo de Bootstrap.14
Professor / Formador Marcos Alvarães 47
Row Cols
Podemos controlar quantas
colunas devem aparecer
próximas umas das outras
(independentemente de
quantas colunas), com as
classes .row-cols-*
Professor / Formador Marcos Alvarães 48
Exemplo de Bootstrap.15
Professor / Formador Marcos Alvarães 49
Professor / Formador Marcos Alvarães 50
Exemplo de Bootstrap.16
Professor / Formador Marcos Alvarães 51
Professor / Formador Marcos Alvarães 52
Exemplo de Bootstrap.17
Professor / Formador Marcos Alvarães 53
Professor / Formador Marcos Alvarães 54
Exemplo de Bootstrap.18
Professor / Formador Marcos Alvarães 55
Professor / Formador Marcos Alvarães 56
Exemplo de Bootstrap.19
Professor / Formador Marcos Alvarães 57
Professor / Formador Marcos Alvarães 58
Exemplo de Bootstrap.20
Professor / Formador Marcos Alvarães 59
Professor / Formador Marcos Alvarães 60
Exemplo de Bootstrap.21
Professor / Formador Marcos Alvarães 61
Exemplo de
construção de um
layout
Professor / Formador Marcos Alvarães 62
Professor / Formador Marcos Alvarães 63
Um layout simples porém bastante utilizado atualmente.
O layout será subdividido em:
Header
Logo
Navbar
Menu
Formulário de Pesquisa (Search)
Main
Banner
Área de artigos
Footer
Copyright
Logo
Professor / Formador Marcos Alvarães 64
ESTRUTURA DO
PROJETO
Primeiro, vamos criar nossa estrutura de pastas e
fazer o download do Bootstrap.
Crie um novo diretório em seu computador com o
nome “layout_bootstrape dentro crie as seguintes
pastas:
layout_bootstrap
img
css
js
Professor / Formador Marcos Alvarães 65
Faça o download do Bootstrap através do link abaixo:
Download Bootstrap
Após o download, copie o ficheiro bootstrap.min.css e cole dentro da
pasta /css e o ficheiro bootstrap.min.js e cole dentro da pasta /js do
seu projeto.
Na raiz, crie um ficheiro chamado index.html.
A estrutura do projeto deverá ficar assim:
Professor / Formador Marcos Alvarães 66
INICIAR O CÓDIGO (Layout.1)
Professor / Formador Marcos Alvarães 67
Acredito que já saiba o que o código acima irá interpretar,
porém existe uma <tag> extremamente importante para o
desenvolvimento de páginas responsivas, a meta tag
viewport, sem ela a responsividade do site não irá funcionar,
portanto nunca esqueça dela.
Perceba que a inclusão dos ficheiros que baixamos do
Bootstrap, o bootstrap.min.css e o bootstrap.min.js, além de
incluir também o jQuery, pois sem ele alguns componentes do
Bootstrap não irão funcionar.
Sempre faço a inclusão dos scripts (js) no final do <body>, pois
assim quero que sejam apenas renderizados depois do
conteúdo, tornando assim o site mais rápido.
Professor / Formador Marcos Alvarães 68
CODIFICAR O HEADER (Layout.2)
Professor / Formador Marcos Alvarães 69
Antes de explicar o código, guarde a logo IEFP dentro de sua
pasta /img com o nome de “IconeIEFP.jpg“.
CLASSES UTILITÁRIAS
Utilizando o HTML5, construímos o nosso cabeçalho com a
tag <header> e acrescentamos a classe utilitária p-5“.
Assim como o “p-“, temos o “m-, “float-, “border-,
position-, “d-, text-centere muitas outras. Cada uma
delas, tem a funcionalidade de trazer ao elemento alguma
configuração CSS, no caso do “p, estamos adicionando
paddingao elemento e o 5” retrata quanto de “padding
queremos adicionar.
Veja mais informações sobre classes utilitárias em: Bootstrap
Spacing.
É muito importante que acesse o site do Bootstrap e leia sua
documentação.
Professor / Formador Marcos Alvarães 70
Navbar e o
Formulário de
Pesquisa (Layout.3)
Para a construção do layout, iremos
utilizar vários componentes prontos,
portanto para o desenvolvimento
do Navbar não será diferente.
Entre no site http://getbootstrap.com/ e
vá na parte de “Components“.
Selecione no menu lateral o item
“Navbar” e vamos copiar, ISSO MESMO,
COPIAR , o código do exemplo
“Default Navbar.
Copie o código e cole logo após o
</header>.
Professor / Formador Marcos Alvarães 71
Professor / Formador Marcos Alvarães 72
Entender o Navbar
Antes de passarmos para o próximo passo, é importante que
conheçam algumas definições da estrutura do “navbar.
Professor / Formador Marcos Alvarães 73
Professor / Formador Marcos Alvarães 74
Professor / Formador Marcos Alvarães 75
Agora que já analisamos a estrutura do nosso
navbar, vamos adaptá-lo para o nosso site.
Apenas remova a <div class=“navbar-
brand”> e guarde o ficheiro.
Professor / Formador Marcos Alvarães 76
O CONTAINER
A classe “containeré umas das classes
mais importantes do Bootstrap, ela acompanha
o framework desde o seu inicio.
Esta classe representa a largura máxima (max-
width) do seu site, podendo ser:
Veja mais em: Bootstrap Containers.
Além da classe “.container” adicionamos a classe
utilitária .text-center“, que faz com que os
elementos recebam a configuração CSS de
text-align: center“, posicionando assim a
nossa logo no centro da página.
CLASSE ESPECIFICAÇÃO
.container
Limita a largura máxima “max-width” do site
e o deixa fixo ao centro, respeitando sempre
o tamanho do dispositivo, não ultrapassando
os 1200px.
.container-
fluid
Deixa a largura máxima do site em 100%.
Muito utilizado para layout de sistemas.
Professor / Formador Marcos Alvarães 77
Main 1º parte (Layout.4)
Professor / Formador Marcos Alvarães 78
Professor / Formador Marcos Alvarães 79
Main 2º parte (Layout.5)
Professor / Formador Marcos Alvarães 80
Professor / Formador Marcos Alvarães 81
Professor / Formador Marcos Alvarães 82
Footer (Layout.6)
Professor / Formador Marcos Alvarães 83
Professor / Formador Marcos Alvarães 84
Scripts (Layout.7)
Professor / Formador Marcos Alvarães 85